﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="flexigrid,asp.net,gridview,dotNetFlexGrid,ajax,table" />
<meta name="description" content="dotNetFlexGrid是一款asp.net原生的异步表格控件，他的前身是Jquery   FlexiGrid插件，我们重构了FlexiGrid的大部分Javascript代码，使其工作的更有效率，BUG更少；同时将其封装为dotNet控件，提供了简单易用的使用方式。" />
<title>JQuery FlexiGrid的asp.net完美解决方案：dotNetFlexGrid - asp.net原生的异步表格控件</title>
<link href="res/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
<h1>JQuery FlexiGrid的asp.net完美解决方案：dotNetFlexGrid - asp.net原生的异步表格控件</h1>
</div>
<br />

<div class="nav">
<span><a href="#what">What is it</a></span>
<span><a href="#version">What's New Version</a> </span>
<span><a href="#use">How to use</a></span>
<span><a href="#example">Example</a></span>
<span><a href="http://dotnetflexgrid.codeplex.com/" target="_blank">Download</a></span>
<span><a href="http://www.cnblogs.com/hualei" target="_blank">华 磊</a></span>
<div style="height:18px;float:right">
    <div id="google_translate_element"></div>
    <script type="text/javascript">
     function googleTranslateElementInit() {
         new google.translate.TranslateElement({
             pageLanguage: 'zh-CN',
             includedLanguages: 'en,zh-TW,zh-CN',
             multilanguagePage: true,
             gaTrack: true,
             layout: google.translate.TranslateElement.InlineLayout.SIMPLE
         }, 'google_translate_element');
     }
    </script>
    <script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    </div>
</div>
<div style="clear:both;height:14px"></div>
<div class="update" style="height: auto;"> <b class="top">What is it?<a name="what" id="what"></a></b>
		<p><img src="res/dotnetFlexGrid.jpg" width="216" height="288" align="right" />dotNetFlexGrid是一款asp.net原生的异步表格控件，他的前身是Jquery   FlexiGrid插件，我们重构了FlexiGrid的大部分Javascript代码，使其工作的更有效率，BUG更少；同时将其封装为dotNet控件，提供了简单易用的使用方式。</p>
				<p>dotNetFlexGrid扩展和优化了FlexiGrid原有的功能，并提供了更多具有针对性的功能，使用dotNetFlexGrid，您的用户可以轻松拥有如下功能</p>
				<ul type="square">
						<li>提供简易的方式自行调整表格列宽</li>
						<li>根据实际情况调整表格的大小</li>
						<li>针对合适的列进行排序</li>
						<li>方便使用的分页器</li>
						<li>自行选择需要看到的表格列</li>
						<li>表单之外的快速查询，界面简洁高效。</li>
						<li>首列提供单选框，提供全选和取消全选的功能。</li>
						<li>所有的操作都基于Ajax异步模型，页面不再需要刷新。</li>
		</ul>
				<p>同时，我们为Asp.net开发者提供了新的列表数据的处理方案，相对于Asp.net GridView或其他表格控件，使用dotNetFlexGrid轻松获得了上述功能，提高了用户体验；同时开发人员更高兴看到</p>
		<ul type="square">
				<li>简洁方便的封装，你可以在同一个页面中完成异步操作的所有代码。（针对dotNetFlexGrid)</li>
				<li>整个Grid作为表单的一部分提交，您可以像ListBox一样使用它。</li>
				<li>简洁的调用机制，基本只需要通过一个后台方法，就可以完成诸如排序、查询、筛选、分页等功能。</li>
				<li>丰富的客户端事件和方法，通过简单的Javascript代码可以轻松完成异步刷新、新增、修改、删除行的效果而无需重新刷新页面（甚至无需重新获取数据）。</li>
				<li>高效的执行代码，AJAX的应用使得您的程序比以往更加高效。</li>
				<li>自定义模板列处理方式，轻松在表格中增加链接、图片、按钮、文本框等任意内容。</li>
				<li>新的格式化数据处理方法，状态字段的转换、上下文数据的不同显示处理轻松实现。</li>
		</ul>
		<p><a href="http://dotnetflexgrid.codeplex.com/" target="_blank"><img src="res/download.jpg" alt="" border="0" /></a></p>
</div>
<div class="update" style="height: auto;"> <b class="top">What's New Version <a name="version" id="version"></a></b>
<p>2010-9-10 v1.24beta<img alt="" src="res/hot.gif" /></p>
<ol>
		<ol>
				<li>修复insertNewRow()、updateRowData()方法处理ID包含“#”时的BUG，调整了若干需要进行Jquery转义的地方。</li>
				<li>新增Js方法containsRowId ()用于检查指定ID的行是否存在。</li>
				<li>新增格式化处理，现在可以通过指定列的格式化方法来处理展现数据了。</li>
				<li>更新演示项目，增加根据状态字段不同来展现不同的数据和单元格颜色。</li>
				<li>修复转换为WebApp可能导致的bug.</li>
		</ol>
</ol>
<p>2010-8-26 v1.23beta(重要更新)</p>
<ol>
		<ol>
				<li>修复insertNewRow()、updateRowData()方法不能正确处理对齐和宽度的bug。</li>
				<li>修复insertNewRow()产生的行不能选中和触发事件的bug。</li>
				<li>新增Js方法getGridJsonData()用于提取当前grid的所有数据，产生一个Json格式的字符串，可以保存在表单域中。</li>
				<li>新增服务端方法ParseGetGridJsonData()用于解析getGridJsonData()生成的数据，将返回一个二维字典，配合CheckedRows可获取到用作表单提交的Grid的所有数据。</li>
				<li>修复applyQueryReload()方法在参数已存在时只能处理一个参数的BUG.</li>
		</ol>
</ol>
<p>2010-8-21 v1.22  beta</p>		
<ol>
		<ol>
				<li>修复字段拖动位置后nBtn按钮的位置不正确的bug.</li>
				<li>修复使用模板后可能导致的模板无效的bug.</li>
				<li>&nbsp;修复字段sortable配置可能无效的bug。</li>
		</ol>
</ol>
<p>2010-8-21 v1.21  beta</p>
<ol>
		<ol>
				<li>增加对控件配置目录的正确性检验，当配置错误的时候将会抛出一个易于理解的异常信息。</li>
				<li>增加控件参数BasePath该参数用于配置控件的存放目录，请提供相对于网站更目录的绝对路径。    </li>
				<li>修复由于字段配置错误所导致的排列错位问题，现在将显示一个noset来标志错误的字段。</li>
		</ol>
</ol>
<p>2010-8-19 v1.2  beta</p>
<ol>
		<ol>
				<li>修复快速查询时的键盘回车事件与控件外围事件的冲突的问题。</li>
				<li>修复快速查询时设置正则表达式时可能导致的语法错误的问题。</li>
				<li>数据提供方法DataHandler将不再强制要求与列的绑定顺序一致，现在通过返回的DataTable中的ColumnName自动绑定到合适的列，所以，请保证您的DataTable和控件中的列名一致（区分大小写）。</li>
				<li>增加展现模板的功能，现InitConfig初始化时针对列配置增加了一个itemTemplate属性，该属性提供了当前列的展现模板设定。</li>
				<li>演示项目中FirstGrid.aspx增加了客户端刷新、服务端刷新和快速查询功能的演示。</li>
				<li>演示项目中TestTemplate.aspx提供了使用展现模板的演示。</li>
		</ol>
</ol>
<p>2010-8-17 v1.1 稳定版</p>
<ol>
		<ol>
				<li>增加全客户端编辑模式，可在不加载任何数据的模式下进行表格数据的添加、删除、修改；通过该功能并结合服务端属性，即可完成将一或者多个动态表格包含在表单中整体提交；典型应用场景：进销存出入库单据、订单等。 </li>
				<li>调整客户端如下方法 </li>
				<ol>
						<li>getCellDatas，现在可以正确获取到客户端调整列顺序后的数据了，返回的数据总是以初始化时的列顺序为准，保证了前后逻辑的一致性。 </li>
						<li>updateRowData&nbsp;新增方法，用于动态修改表格中的数据，提供的数据以初始化时的列顺序为准。 </li>
						<li>insertNewRow，调整提供的数据以初始化时的列顺序为准。 </li>
				</ol>
				<li>优化表格列手动调整顺序，可以让客户自己对表格的列顺序进行调整。 </li>
				<li>优化客户端呈现效率-调整多数行、列数据处理方式为字典模式，摒弃大部分原采用的根据dom结构操作数据的方法，提升了客户端的响应速度。 </li>
				<li>修复客户端新增行无法选中的BUG。 </li>
				<li>截止当前版本，与原生FlexiGrid和<a href="http://www.cnblogs.com/xuanye/">假正经哥哥</a>的改进版本变化非常之大，基本核心代码进行过重构和改进，与上述控件已不存在兼容的可能。 </li>
		</ol>
</ol>
<p>2010-8-13 v1.0正式版</p>
<ol>
		<ol>
				<li>增加通用分页存储过程解决方案。</li>
				<li> 新增表格数据的字典模式处理，摒弃原rowbinddata的方式，提升了处理效率和DOM的简洁性，修改若干返回数据的方法应用字典模式。</li>
				<li>原有的getSelectRows方法更名为getSelectedRowsIds，返回当前选择行的id数组；</li>
				<li> 新增方法getSelectedRows，返回当前选择行的数组，数组元素是列的字典； </li>
		</ol>
</ol>
<p>2010-8-2  v1.0beta</p>
<ol>
		<ol>
				<li>将样式表的加载改为JS动态加载。</li>
				<li>采用类似于AJAX的反射模式调用数据提供函数，使得不必单独开发数据提供的页面或逻辑处理。</li>
				<li>放弃原控件的Toolbar功能，我认为功能性操作应该与数据展示在表现形式和逻辑封装上分离开，比如操作权限控制应该有独立的逻辑处理。</li>
				<li>新增若干客户端事件（单击行、双击行、选择行、加载等）。</li>
				<li>新增服务端属性CheckedRows，整个控件可以作为表单的一部分提交，可在服务端直接获取当前选择的行的主键（ID）。</li>
				<li>优化表格首行复选框的展示和处理，修复onrowchecked事件的若干BUG。</li>
				<li>新增列参数checkField，第一个设为checkField的列通过绑定布尔值可以在加载数据时选择到需要被选择的行，该操作不会触发事件。</li>
				<li>针对原有Javascript进行重新封装，提供单独的对象进行控件的处理。</li>
				<li>修改数据提供模式固定为Json，本控件将只支持Json方式的异步数据提供。</li>
				<li>修复多个控件存在时产生的若干BUG。</li>
				<li>修复若干BUG，增加正则错误验证，各类数据null的验证。</li>
		</ol>
</ol>
</div>


<div class="update" style="height: auto;"><b class="top">How to use<a name="use" id="use"></a></b>
		<p>dotNetFlexGrid虽然是易于使用的，但为了让用户更好的使用它，我们提供多篇快速开始教程和使用指南，你可以访问下面的链接来获取信息。</p>
				<ul type="square">
								<li><a id="homepage1_HomePageDays_ctl03_DayList_ctl00_TitleUrl" href="http://www.cnblogs.com/hualei/archive/2010/08/17/1801500.html">JQuery FlexiGrid的asp.net完美解决方案：dotNetFlexGrid-.Net原生的异步表格控件 简介和应用效果截图</a> </li>
						<li><a id="homepage1_HomePageDays_DaysList_ctl04_DayItem_DayList_ctl00_TitleUrl" href="http://www.cnblogs.com/hualei/archive/2010/08/17/1801850.html">JQuery   FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(一）Ajax异步表格</a> </li>
						<li><a id="homepage1_HomePageDays_DaysList_ctl02_DayItem_DayList_ctl02_TitleUrl" href="http://www.cnblogs.com/hualei/archive/2010/08/20/1804689.html">JQuery   FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(二）服务端查询、快速查询和Html模板</a> </li>
						<li><a id="homepage1_HomePageDays_DaysList_ctl04_DayItem_DayList_ctl08_TitleUrl" href="http://www.cnblogs.com/hualei/articles/1801459.html">JQuery   FlexiGrid的asp.net完美解决方案:dotNetFlexGrid表格控件说明文档</a> </li>
						<li><a id="homepage1_HomePageDays_ctl03_DayList_ctl02_TitleUrl" href="http://www.cnblogs.com/hualei/archive/2010/08/17/1801474.html">JQuery FlexiGrid的asp.net完美解决方案:dotNetFlexGrid 源码、文档、演示下载</a></li>
				</ul>
				<p>更多的和及时的资讯请访问主创人员 <a href="http://www.cnblogs.com/hualei/" target="_blank">华磊</a> 的博客（<a href="http://www.cnblogs.com/hualei/" target="_blank">http://www.cnblogs.com/hualei/</a>）,或者访问我们的项目主站（h<a href="http://dotnetflexgrid.codeplex.com/" target="_blank">ttp://dotnetflexgrid.codeplex.com/）</a>来获取最新的发布版本。</p>
</div>
<div class="update" style="height: auto;"> <b class="top">Example<img alt="" 
        src="res/hot.gif" /><a name="example" id="example"></a></b>
		<p>主创人员 <a href="http://www.cnblogs.com/hualei/" target="_blank">华磊</a> 正在不断地将控件的功能和使用方法通过范例介绍给大家，您可以通过查看下述的范例快速掌握dotNetFlexGrid的使用</p>
		<ul type="square">
				<li><a href="Samples/FirstGrid.aspx">快速指南中提供的FirstGrid.aspx，演示如何快速的建立一个强大的Grid应用</a>
				<ol><li style="background-image:none"><img src="res/firstgrid.JPG" width="381" height="181" /></li></ol>
				</li>
				<li><a href="Samples/TestTemplate.aspx">演示如何使用template在Grid中展现链接、图片、文本框、按钮等等</a>
				<ol><li style="background-image:none"><img src="res/template.jpg" width="445" height="246" /></li>
				</ol>
				</li>
				<li><img alt="" 
        src="res/hot.gif" /><a href="Samples/TestStockFormList.aspx">快速指南中提供TestStockFormList.aspx,演示在表单中使用dotNetFlexGrid储存客户录入的数据并作为表单提交</a></li>
		</ul>
		<p><img src="res/TestStockFormList.jpg" /></p>
		<ul type="square">
				<li><a href="TestCase/TestClientMode.aspx">用于演示客户端事件、方法，并通过2个Grid实验事件是否会相互干扰；您可以学习如何使用客户端方法异步的在表格中添加、删除、修改、重读数据</a>
						<ol><li style="background-image:none"></li>
						</ol>
				</li>
				<li><a href="TestCase/TestFirstControl.aspx">很杂的演示，原谅 作者 喜欢将所有的实验代码放在一起吧。</a>
						<ol><li style="background-image:none"></li>
						</ol>
				</li>
				<li><a href="TestCase/TestFormPost.aspx">演示通过后台代码初始化表格的复选状态，并将表格作为表单的一部分提交。</a>
						<ol><li style="background-image:none"></li>
						</ol>
				</li>
				<li><a href="TestCase/TestTwoGrid.aspx">很多场景都需要的多个Grid的联动效果。</a>
						<ol><li style="background-image:none"><img src="res/twoGrid.JPG" width="411" height="382" /></li>
						</ol>
				</li>
		</ul>
</div>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-18123822-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<!-- 悬浮翻译工具
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'zh-CN',
    includedLanguages: 'en,zh-TW,zh-CN',
    multilanguagePage: true,
    gaTrack: true,
    floatPosition: google.translate.TranslateElement.FloatPosition.TOP_RIGHT
  });
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-->
</body>
</html>
